<template>
<div class="note" :style ="note">
  <div class="course">
    <h1>{{course}}</h1>
  </div>
  <div class="search">
    <el-input v-model="inputValue"  size="small" class="input-value" id="inputValue" name="searchForm" placeholder="请输入搜索内容" clearable>

    </el-input>
    <el-button  size="small" class="input-search-btn"  @click="searchInTotal" name="searchBtn" value="搜索">搜索</el-button>
  </div>

</div>

</template>

<script>
    export default {
      props:["placeholder","course"],
      name:'portalHeader',
      data(){
        return{
          inputValue:'',
          note: {
            backgroundImage: "url(" + require("../../assets/images/portal_header_background.png") + ")",
          backgroundRepeat: "no-repeat",
            //backgroundPosition: "center",
            width:"1080" ,
            height:"210px",
          }
        }
      },
      methods:{
        searchInTotal(){
          var inputValue = document.getElementById("inputValue")
          this.$emit("returnedValue", {columnName: this.selectedValue, inputValue: this.inputValue});
        },
      }
    }
</script>

<style scoped>
  .search{
    padding-left: 810px;
  }

  .input-value{
    width:200px;
    height: 10px;
  }

  .input-search-btn{
    font-size: 12px;
    color: #000;
    background: -webkit-linear-gradient(#F8E802, #E8B108, #F8E802); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#F8E802, #E8B108, #F8E802); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#F8E802, #E8B108, #F8E802); /* Firefox 3.6 - 15 */
    background: linear-gradient(#F8E802, #E8B108, #F8E802); /* 标准的语法（必须放在最后） */
  }

  .course{
    padding-left: 240px;
    padding-top: 74px;
    color: white;
  }
</style>
